<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="navbar-content">
				<text class="navbar-title">电商插件服务</text>
				<view class="navbar-right" @click="openShare">
					<text class="iconfont share-icon">&#xe6f3;</text>
				</view>
			</view>
		</view>
		
		<!-- 头部横幅 -->
		<scrollToSection(id) {
		  const query = uni.createSelectorQuery();
		  query.select('#' + id).boundingClientRect();
		  query.selectViewport().scrollOffset();
		  query.exec(function(res) {
			uni.pageScrollTo({
			  scrollTop: res[0].top + res[1].scrollTop - 50,
			  duration: 300
			});
		  });
		},
		
		scrollToTop() {
		  uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		  });
		}/* 头部横幅优化 */
		.promotion-banner {
		  background: linear-gradient(135deg, #4a7bff, #6a5acd);
		  border-radius: 20rpx;
		  overflow: hidden;
		  position: relative;
		  margin: 30rpx;
		  box-shadow: 0 10rpx 30rpx rgba(74, 123, 255, 0.3);
		}
		
		.banner-title {
		  font-size: 42rpx;
		  font-weight: bold;
		  color: #ffffff;
		  margin-bottom: 15rpx;
		}
		
		.banner-button {
		  display: flex;
		  align-items: center;
		  background-color: rgba(255, 255, 255, 0.2);
		  border-radius: 50rpx;
		  padding: 15rpx 30rpx;
		  transition: all 0.3s;
		}
		
		.banner-button:active {
		  transform: scale(0.95);
		  background-color: rgba(255, 255, 255, 0.3);
		}
		
		/* 通知条样式 */
		.notice-bar {
		  display: flex;
		  align-items: center;
		  background-color: #FFF9E6;
		  padding: 15rpx 30rpx;
		  margin: 30rpx;
		  border-radius: 10rpx;
		  border-left: 8rpx solid #FFC107;
		}
		
		.notice-icon {
		  color: #FFC107;
		  margin-right: 15rpx;
		  font-size: 34rpx;
		}
		
		.notice-swiper {
		  height: 60rpx;
		  flex: 1;
		}
		
		.notice-text {
		  font-size: 28rpx;
		  color: #666;
		}
		
		/* 服务卡片优化 */
		.service-card {
		  background-color: #ffffff;
		  border-radius: 16rpx;
		  padding: 30rpx;
		  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
		  transition: all 0.3s;
		  position: relative;
		  overflow: hidden;
		  animation: fadeIn 0.5s ease-out forwards;
		  opacity: 0;
		}
		
		@keyframes fadeIn {
		  from { opacity: 0; transform: translateY(30rpx); }
		  to { opacity: 1; transform: translateY(0); }
		}
		
		.service-card:active {
		  transform: scale(0.98);
		  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);
		}
		
		.service-icon {
		  width: 100rpx;
		  height: 100rpx;
		  border-radius: 20rpx;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  margin-bottom: 20rpx;
		}
		
		.service-name {
		  font-size: 34rpx;
		  font-weight: bold;
		  color: #333;
		  margin-bottom: 10rpx;
		}
		
		.service-footer {
		  margin-top: 20rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		}
		
		.service-price {
		  font-size: 38rpx;
		  font-weight: bold;
		  color: #ff5722;
		}
		
		.service-action {
		  display: flex;
		  align-items: center;
		  font-size: 26rpx;
		  color: #4a7bff;
		}
		
		/* 优势区域优化 */
		.advantages-list {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  padding: 20rpx 0;
		}
		
		.advantage-item {
		  width: 320rpx;
		  background-color: #ffffff;
		  border-radius: 16rpx;
		  padding: 30rpx;
		  margin-bottom: 30rpx;
		  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
		  text-align: center;
		}
		
		/* 用户评价区域 */
		.testimonials-section {
		  padding: 30rpx;
		}
		
		.testimonial-swiper {
		  height: 400rpx;
		}
		
		.testimonial-card {
		  background-color: #ffffff;
		  border-radius: 16rpx;
		  padding: 40rpx;
		  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
		  position: relative;
		  height: 90%;
		  margin: 20rpx;
		}
		
		.testimonial-quote {
		  position: absolute;
		  top: 20rpx;
		  left: 20rpx;
		  color: rgba(0, 0, 0, 0.05);
		  font-size: 60rpx;
		}
		
		.testimonial-content {
		  font-size: 28rpx;
		  color: #666;
		  line-height: 1.5;
		  margin-bottom: 30rpx;
		}
		
		.testimonial-user {
		  display: flex;
		  align-items: center;
		}
		
		.user-avatar {
		  width: 80rpx;
		  height: 80rpx;
		  border-radius: 40rpx;
		  margin-right: 20rpx;
		  background-size: cover;
		  background-position: center;
		}
		
		.user-name {
		  font-size: 28rpx;
		  font-weight: bold;
		  color: #333;
		}
		
		.user-company {
		  font-size: 24rpx;
		  color: #999;
		}
		
		/* 快速导航 */
		.quick-nav {
		  position: fixed;
		  right: 30rpx;
		  bottom: 100rpx;
		  display: flex;
		  flex-direction: column;
		  z-index: 99;
		}
		
		.nav-item {
		  width: 80rpx;
		  height: 80rpx;
		  background-color: #ffffff;
		  border-radius: 40rpx;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  margin-bottom: 20rpx;
		  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
		}
		
		.nav-item .iconfont {
		  font-size: 40rpx;
		  color: #4a7bff;
		}view class="promotion-banner">
			<view class="banner-content">
				<text class="banner-title">AI赋能电商</text>
				<text class="banner-subtitle">提升效率·降低成本·增加转化</text>
				<view class="banner-button" @click="contactUs">
					<text>立即咨询</text>
				</view>
			</view>
			<view class="banner-decoration">
				<text class="decoration-icon">&#xe6df;</text>
			</view>
		</view>
		
		<!-- 服务卡片列表 -->
		<view class="service-list">
			<view class="section-title">
				<view class="title-decorator"></view>
				<text>我们的服务</text>
			</view>
			
			<view class="service-grid">
				<view class="service-card" v-for="(item, index) in serviceList" :key="index" @click="navigateToDetail(item)">
					<view class="service-icon" :style="{ background: item.gradient }">
						<text class="iconfont">{{item.iconCode}}</text>
					</view>
					<text class="service-name">{{item.name}}</text>
					<text class="service-desc">{{item.desc}}</text>
					<view class="service-footer">
						<text class="service-price">¥{{item.price}}</text>
						<view class="service-action">
							<text>了解详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优势介绍 -->
		<view class="advantages-section">
			<view class="section-title">
				<view class="title-decorator"></view>
				<text>为什么选择我们</text>
			</view>
			
			<view class="advantages-list">
				<view class="advantage-item">
					<view class="advantage-icon">
						<text class="iconfont">&#xe73e;</text>
					</view>
					<text class="advantage-title">AI智能引擎</text>
					<text class="advantage-desc">基于先进算法，精准理解图像内容</text>
				</view>
				<view class="advantage-item">
					<view class="advantage-icon">
						<text class="iconfont">&#xe702;</text>
					</view>
					<text class="advantage-title">高效批处理</text>
					<text class="advantage-desc">批量处理能力强，节省90%工作时间</text>
				</view>
				<view class="advantage-item">
					<view class="advantage-icon">
						<text class="iconfont">&#xe61b;</text>
					</view>
					<text class="advantage-title">个性化定制</text>
					<text class="advantage-desc">满足不同平台和商品类型需求</text>
				</view>
				<view class="advantage-item">
					<view class="advantage-icon">
						<text class="iconfont">&#xe650;</text>
					</view>
					<text class="advantage-title">专业支持</text>
					<text class="advantage-desc">7×24小时技术支持和培训服务</text>
				</view>
			</view>
		</view>
		
		<!-- 联系我们 -->
		<view class="contact-section">
			<view class="section-title">
				<view class="title-decorator"></view>
				<text>联系我们</text>
			</view>
			
			<view class="contact-card">
				<view class="contact-item">
					<text class="iconfont contact-icon">&#xe69b;</text>
					<text class="contact-text">400-123-4567</text>
				</view>
				<view class="contact-item">
					<text class="iconfont contact-icon">&#xe6e8;</text>
					<text class="contact-text">service@example.com</text>
				</view>
				<view class="contact-button" @click="contactUs">
					<text>立即咨询</text>
				</view>
			</view>
		</view>
		
		<!-- 分享弹出层 -->
		<uni-popup ref="sharePopup" type="bottom">
			<view class="share-popup">
				<view class="share-title">分享到</view>
				<view class="share-options">
					<view class="share-option" @click="shareToWeixin">
						<text class="share-icon iconfont">&#xe638;</text>
						<text class="share-name">微信</text>
					</view>
					<view class="share-option" @click="shareToFriend">
						<text class="share-icon iconfont">&#xe634;</text>
						<text class="share-name">朋友圈</text>
					</view>
					<view class="share-option" @click="shareToQQ">
						<text class="share-icon iconfont">&#xe62d;</text>
						<text class="share-name">QQ</text>
					</view>
					<view class="share-option" @click="copyLink">
						<text class="share-icon iconfont">&#xe632;</text>
						<text class="share-name">复制链接</text>
					</view>
				</view>
				<view class="share-cancel" @click="closeShare">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { onShareAppMessage } from '@dcloudio/uni-app';
	
	export default {
		data() {
			return {
				statusBarHeight: 20,
				serviceList: [
					{
						id: 1,
						name: '批量套图工具',
						desc: '手动框住内容，然后一键批量套图得到产品图',
						price: '3000',
						iconCode: '\ue6dc',
						gradient: 'linear-gradient(135deg, #4CAF50, #8BC34A)'
					},
					{
						id: 2,
						name: '图生标题',
						desc: '批量导入产品图，对图进行理解进行批量生成电商标题',
						price: '2000',
						iconCode: '\ue668',
						gradient: 'linear-gradient(135deg, #2196F3, #03A9F4)'
					},
					{
						id: 3,
						name: '图生图/文生图',
						desc: '批量对图片进行理解生成关联图，可大搭配提示词组合使用',
						price: '3000',
						iconCode: '\ue642',
						gradient: 'linear-gradient(135deg, #9C27B0, #673AB7)'
					},
					{
						id: 4,
						name: '图生视频',
						desc: '对图片内容理解生成对应产品特写视频+音乐定制',
						price: '5000',
						iconCode: '\ue6d0',
						gradient: 'linear-gradient(135deg, #FF5722, #FF9800)'
					}
				],
				shareInfo: {
					title: '电商插件服务 - AI赋能电商，提升运营效率',
					path: '/ecommercePlugin/pages/home/home',
					imageUrl: 'https://example.com/share-image.jpg',
					desc: '批量套图、图生标题、图生图、图生视频，一站式电商AI工具服务。'
				}
			};
		},
		onLoad() {
			// 获取状态栏高度
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			});
		},
		// 分享设置
		onShareAppMessage() {
			return {
				title: this.shareInfo.title,
				path: this.shareInfo.path,
				imageUrl: this.shareInfo.imageUrl,
				desc: this.shareInfo.desc
			};
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				path: this.shareInfo.path,
				imageUrl: this.shareInfo.imageUrl
			};
		},
		methods: {
			// 跳转到详情页
			navigateToDetail(item) {
				uni.navigateTo({
					url: `/ecommercePlugin/pages/detail/detail?id=${item.id}`
				});
			},
			
			// 打开分享弹窗
			openShare() {
				this.$refs.sharePopup.open();
			},
			
			// 关闭分享弹窗
			closeShare() {
				this.$refs.sharePopup.close();
			},
			
			// 分享到微信
			shareToWeixin() {
				// 微信小程序中会自动触发分享
				#ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					title: this.shareInfo.title,
					summary: this.shareInfo.desc,
					imageUrl: this.shareInfo.imageUrl,
					href: 'https://example.com/ecommerce',
					success: () => {
						uni.showToast({
							title: '分享成功'
						});
					},
					fail: () => {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				});
				#endif
				
				#ifdef H5
				uni.showToast({
					title: 'H5环境请长按图片保存分享',
					icon: 'none'
				});
				#endif
				
				this.closeShare();
			},
			
			// 分享到朋友圈
			shareToFriend() {
				#ifdef APP-PLUS
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneTimeline',
					type: 0,
					title: this.shareInfo.title,
					summary: this.shareInfo.desc,
					imageUrl: this.shareInfo.imageUrl,
					href: 'https://example.com/ecommerce',
					success: () => {
						uni.showToast({
							title: '分享成功'
						});
					},
					fail: () => {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				});
				#endif
				
				#ifdef H5
				uni.showToast({
					title: 'H5环境请长按图片保存分享',
					icon: 'none'
				});
				#endif
				
				this.closeShare();
			},
			
			// 分享到QQ
			shareToQQ() {
				#ifdef APP-PLUS
				uni.share({
					provider: 'qq',
					type: 0,
					title: this.shareInfo.title,
					summary: this.shareInfo.desc,
					imageUrl: this.shareInfo.imageUrl,
					href: 'https://example.com/ecommerce',
					success: () => {
						uni.showToast({
							title: '分享成功'
						});
					},
					fail: () => {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						});
					}
				});
				#endif
				
				#ifdef H5
				uni.showToast({
					title: 'H5环境请使用复制链接功能',
					icon: 'none'
				});
				#endif
				
				this.closeShare();
			},
			
			// 复制链接
			copyLink() {
				uni.setClipboardData({
					data: 'https://example.com/ecommerce',
					success: () => {
						uni.showToast({
							title: '链接已复制'
						});
					}
				});
				this.closeShare();
			},
			
			// 联系我们
			contactUs() {
				uni.showToast({
					title: '正在连接客服...',
					icon: 'none'
				});
				
				// 在真实应用中应跳转到联系页面或使用内置客服插件
				// uni.navigateTo({
				//   url: '/pages/contact/contact'
				// });
			}
		}
	}
</script>

<style lang="scss">
	/* 图标字体 */
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_3285913_qtjppzj2ot.woff2') format('woff2');
	}
	
	.iconfont {
		font-family: 'iconfont';
		font-style: normal;
		font-size: 46rpx;
	}
	
	.container {
		background-color: #f8f8f8;
		min-height: 100vh;
		width: 100%;
		padding-bottom: 40rpx;
	}
	
	/* 自定义导航栏 */
	.custom-navbar {
		background-color: #ffffff;
		width: 100%;
		position: relative;
		z-index: 100;
		
		.navbar-content {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			
			.navbar-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
			
			.navbar-right {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				
				.share-icon {
					font-size: 40rpx;
					color: #666;
				}
			}
		}
	}
	
	/* 头部横幅 */
	.promotion-banner {
		background: linear-gradient(135deg, #3949AB, #1E88E5);
		padding: 60rpx 40rpx;
		border-radius: 0 0 30rpx 30rpx;
		color: white;
		display: flex;
		position: relative;
		overflow: hidden;
		
		.banner-content {
			flex: 1;
			z-index: 2;
			
			.banner-title {
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				display: block;
			}
			
			.banner-subtitle {
				font-size: 28rpx;
				opacity: 0.9;
				margin-bottom: 40rpx;
				display: block;
			}
			
			.banner-button {
				display: inline-block;
				background-color: #ffffff;
			color: #3949AB;
				padding: 16rpx 40rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.15);
			}
		}
		
		.banner-decoration {
			position: absolute;
			right: 20rpx;
			bottom: -20rpx;
			z-index: 1;
			opacity: 0.2;
			
			.decoration-icon {
				font-family: 'iconfont';
				font-size: 200rpx;
				color: white;
			}
		}
	}
	
	/* 章节标题 */
	.section-title {
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx 20rpx;
		
		.title-decorator {
			width: 8rpx;
			height: 40rpx;
			background: linear-gradient(to bottom, #3949AB, #1E88E5);
			border-radius: 4rpx;
			margin-right: 20rpx;
		}
		
		text {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	/* 服务卡片网格 */
	.service-list {
		padding: 0 20rpx;
		
		.service-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			padding: 20rpx 0;
		}
	}
	
	.service-card {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		
		.service-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			
			text {
				color: white;
				font-size: 50rpx;
			}
		}
		
		.service-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.service-desc {
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;
			margin-bottom: 20rpx;
			height: 68rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		
		.service-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: auto;
			
			.service-price {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF5722;
			}
			
			.service-action {
				background-color: #f5f5f5;
				padding: 6rpx 16rpx;
				border-radius: 30rpx;
				font-size: 22rpx;
				color: #666;
			}
		}
	}
	
	/* 优势介绍 */
	.advantages-section {
		padding: 0 20rpx;
		
		.advantages-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			padding: 20rpx 0;
		}
	}
	
	.advantage-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		
		.advantage-icon {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #1E88E5, #42A5F5);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
			
			text {
				color: white;
				font-size: 46rpx;
			}
		}
		
		.advantage-title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.advantage-desc {
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;
		}
	}
	
	/* 联系我们 */
	.contact-section {
		padding: 0 20rpx;
		
		.contact-card {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
			margin: 20rpx 0;
		}
	}
	
	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.contact-icon {
			color: #1E88E5;
			margin-right: 20rpx;
			font-size: 36rpx;
		}
		
		.contact-text {
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.contact-button {
		background: linear-gradient(135deg, #3949AB, #1E88E5);
		color: white;
		padding: 20rpx 0;
		text-align: center;
		border-radius: 40rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(30, 136, 229, 0.3);
	}
	
	/* 分享弹出层 */
	.share-popup {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		
		.share-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 30rpx;
		}
		
		.share-options {
			display: flex;
			justify-content: space-around;
			padding: 30rpx 0;
		}
		
		.share-option {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.share-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 10rpx;
				font-size: 50rpx;
				color: #1E88E5;
			}
			
			.share-name {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.share-cancel {
			margin-top: 40rpx;
			padding: 20rpx 0;
			text-align: center;
			border-top: 1rpx solid #f5f5f5;
			font-size: 30rpx;
			color: #666;
		}
	}
</style>
